<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <title>人员收支模块</title>
    <!-- Bootstrap core CSS -->
    <link href="../static/asserts/css/bootstrap.min.css" th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Custom styles for this template -->
    <link href="../static/asserts/css/dashboard.css" th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<div th:replace="sidbar::#topbar"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="sidbar::#sbar"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div class="chartjs-size-monitor"
                 style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                <div class="chartjs-size-monitor-expand"
                     style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                </div>
                <div class="chartjs-size-monitor-shrink"
                     style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                    <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                </div>
            </div>

            <br/>
<!--            模态框-->
            <div class="container-fluid" style="border:gray solid 1px ">

                <div class="row" style="background: #d2ffa9">
                    <div class="col-md-3">
                        员工姓名: <input type="text" id="pname">
                    </div>
                    <div id="selector1" style="font-size: large;" class="col-md-offset-1">
                           部门：
                    </div>
                    <div class="col-lg-3 col-md-offset-3">
                        <button id="search1" class="btn-success" onclick="peopleList()">查询</button>
                        <button id="order1" class="btn-primary" onclick="order++;peopleList()">资金排序: </button>
                        <button type="button" class="btn-success" data-toggle="modal" data-target="#myModal">
                            资金操作
                        </button>
                    </div>
                </div>
                <div>
                    <table id="bodyList" class="table table-bordered">
                        <!-- Modal -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title" id="exampleModalLabel">扣除/发放资金</h4>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    </div>
                                    <div class="modal-body">
                                            <div class="form-group" id="form1">

                                            </div>
                                            <div class="form-group">
                                                <label   class="control-label">金额:</label>
                                                <div class="input-group">
                                                    <div class="input-group-addon">￥</div>
                                                    <input type="text" class="form-control" id="money" placeholder="金额">
                                                    <div class="input-group-addon">.00</div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="profile-text" class="control-label">备注:</label>
                                                <textarea class="form-control" id="profile-text"></textarea>
                                            </div>
                                            <div class="form-group" id="form2">
                                                <label   class="control-label">类型: </label>
                                            </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="setMoney(2)">添加</button>
                                        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="setMoney(1)">扣除</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </table>

                    <div class="col-md-2">
                    </div>

                    <nav  aria-label="Page navigation" style="text-align: center"  id="page">
                    </nav>

                </div>
            </div>

        </main>
    </div>
</div>

<script>
    var order=0;
    var orderCN;
    var pageNo=1;
    var pages;
    peopleList();
    function peopleList() {
        $("#bodyList").empty();
        $("#page").empty();
        $("#form1").empty();
        if (order%3==1){
            orderCN="升序";
        }else if (order%3==2){
            orderCN="降序";
        }else {
            orderCN="无序";
        }
        $("#order1").html("资金排序:"+orderCN);
        if (pageNo<1){
            pageNo=1;
        };
        if (pageNo>pages){
            pageNo=pages;
        };
        $.ajax({
            type:"get",
            url:"user/getPeople",
            data:{'pageNo':pageNo,'pageSize':10,'groupId':$("#select1").val(),'nickName':$("#pname").val(),'order':order%3},
            success:function (data) {
                if (data.code==201){
                    alert(data.status_desc)
                }else {
                    pages = data.pageparam.pages;
                    pageL = data.pageparam.pageArr;
                    var tr = $('<tbody></tbody>');
                    var th = $('<thead><tr><th>编号</th><th>名字</th><th>资金总额</th><th>部门</th><th>个人信息</th>' +
                        '<th>资金详情</th><th>职位</th></tr></thead>');
                    var select = $('<select  id="selectName"> </select>');
                    for (var i = 0; i < data.data.length; i++) {
                        var totalMoney = data.data[i].totalMoney == null ? 0 : data.data[i].totalMoney;
                        select.append('<option  value="' + data.data[i].userId + '">' + data.data[i].nickName + '</option>');
                        var tempLi = '<tr><td>' + data.data[i].userId + '</td>' + '<td>' + data.data[i].nickName + '</td>'
                            + '<td>' + totalMoney + '</td>' + '<td>' + data.data[i].gName + '</td>'
                            + '<td><a href="toDetail?userId=' + data.data[i].userId + '" id="detail">详情</a></td>' +
                            '<td><a href="toMoney?userId=' + data.data[i].userId + '">资金详情</a></td>' +
                            '<td>' + data.data[i].work + '</td></tr>';
                        tr.append(tempLi);
                    }
                    ;
                    $("#bodyList").append(th).append(tr);
                    $("#form1").append('<label   class="control-label">姓名:</label>').append(select);
                    // 分页
                    var left = $('<ul class="pagination pagination-lg"><li> <a onclick="peopleList(pageNo=1)"\n' +
                        ' aria-label="Next"> <span aria-hidden="true">首页</span> </a> </li> <li> <a onclick="peopleList(pageNo-=1)"\n' +
                        ' aria-label="Next"> <span aria-hidden="true">&laquo;</span> </a> </li> </ul>');
                    var pageArr = $('<ul class="pagination pagination-lg"></ul>');
                    for (var b = 1; b < data.pageparam.pageArr.length + 1; b++) {
                        var pageList = $('<li><a onclick="peopleList(pageNo=' + b + ')" ></a></li>');
                        pageList.find('a').text(b)
                        pageArr.append(pageList);
                    }
                    ;
                    var right = $('<ul class="pagination pagination-lg"><li> <a onclick="peopleList(pageNo+=1)"\n' +
                        ' aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> <li> <a onclick="peopleList(pageNo=' + pages + ')"\n' +
                        ' aria-label="Next"> <span aria-hidden="true">末页</span> </a> </li> </ul>');
                    $("#page").append(left).append(pageArr).append(right);
                }
            },
            error:function(data){
                alert('服务器内部错误！');
            },
        });
    };

    $.ajax({
        type:"get",
        url:"user/getGroup",
        success:function (data) {
            if (data.code==201){
                alert(data.status_desc)
            }else {
                var selector = $('<select id="select1"><option  value="0">所有部门</option></select>');
                for (var i = 0; i < data.data.length; i++) {
                    selector.append('<option  value="' + data.data[i].id + '"  title="'+data.data[i].profile+'">' + data.data[i].name + '</option>');
                }
                $("#selector1").append(selector);
            }
        },
        error:function(data){
            alert('服务器内部错误！');
        },
    });
    $.ajax({
        type:"get",
        url:"pay/getPayType",
        success:function (data) {
            if (data.code==201){
                alert(data.status_desc)
            }else {
                var selector = $('<select id="selectType"></select>');
                for(var i=0;i<data.data.length;i++){
                    selector.append('<option  value="'+data.data[i].id+'">'+data.data[i].name +'</option>');
                };
                $("#form2").append(selector);
            }
        },
        error:function(data){
            alert('服务器内部错误！');
        },
    });

    function setMoney(way) {
        var dataEL={'userId':$("#selectName").val(),'type':$("#selectType").val(),
            'profile':$('#profile-text').val(),'way':way,'payMoney':$('#money').val()};
        $.ajax({
            type:"post",
            url:"pay/addPay",
            data: dataEL,
            success:function (data) {
                if (data.code==201){
                    alert(data.status_desc)
                }else {
                    alert(data.status_desc)
                }
            },
            error:function(data){
                alert('服务器内部错误！');
            },
        });
    }




</script>
</body>

</html>
